import { useState, useEffect } from 'react'
import { Button, Space, Input, message } from 'antd'
import { versionPathOperation } from "@/utils/index";
import s from "./index.module.less";

function App(): JSX.Element {
  const [config, setConfig] = useState<any>({
    path1: versionPathOperation.get('versionPath'),
    path2: versionPathOperation.get('config'),
    jb1: '',
    jb2: '',
    jb3: '',
    jb4: `;----qm-----
#IF
#ACT
ESPOpenAutoPlayGame
StartElf 1
STARTPICKUP

;-----qf----
[@ESPStartAutoPlayGame]
#or
ISONMAP 0150
ISONMAP new3
#ACT
MESSAGEBOX \提示：当前地图禁止挂机！
BREAK

#IF
check [009] 1
#ACT
ESPStartAutoPlayGame
SENDMSG 7 开始挂机，使用快捷键~停止挂机
BREAK
#elseact
SENDMSG 6 请先领取微信礼包才能使用该功能
BREAK`,
    jb5: '',
    jb6: '',
  })

  const getV = async () => {
    if (!config.path2) {
      return message.error('请输入会员站配置文件的路径')
    }

    const c = {
      ...config
    }
    c.jb1 = await window.api.getVal(window.api.getLocalMirserverPath(), '通用脚本', '店铺.txt')
    c.jb2 = await window.api.getVal(window.api.getLocalMirserverPath(), '通用脚本', '传送石战斗状态.txt')
    c.jb3 = await window.api.getVal(window.api.getLocalMirserverPath(), '通用脚本', '禁言.txt')
    c.jb5 = await window.api.getVal(window.api.getLocalMirserverPath(), '通用脚本', '假人.txt')
    c.jb6 = await window.api.getVal(window.api.getLocalMirserverPath(), '通用脚本', '输入校验.txt')
    setConfig(c)

    return c
  }

  useEffect(() => {
    getV()
  }, [])


  return (
    <div className={s.box}>
      <Space>
        <div>
          <p>版本服务器所在路径:</p>
          <div className='flex'>
            <Input size='small' spellCheck="false" value={config.path1} />

            <div className='file-box'>
              <Button size='small' type='primary' onClick={() => {
                const c = {
                  ...config
                }
                c.path1 = window.api.syncOperationWindow('selectDirectory')
                versionPathOperation.save('versionPath', c.path1)
                setConfig(c)
              }}>浏览</Button>
            </div>
          </div>
        </div>

        <div>
          <p>
            默认使用软件内置的配置文件(也可自己上传):
          </p>
          <div className='flex'>
            <Input size='small' spellCheck="false" value={config.path2} />

            <div className='file-box'>
              <Button size='small' type='primary' onClick={() => {
                const c = {
                  ...config
                }
                c.path2 = window.api.syncOperationWindow('selectDirectory')
                versionPathOperation.save('config', c.path2)
                setConfig(c)
              }}>浏览</Button>
            </div>
          </div>
        </div>
      </Space>

      <div>
        <div className='flex'>
          <p>战斗状态不能使用传送石:</p>
          <Button size='small' type='primary' onClick={async () => {
            window.api.copePath(config.jb2)
            window.api.openFile(config)
          }}>点击自动复制内容并打开Envir文件</Button>
        </div>
        <Input.TextArea
          spellCheck="false"
          autoSize
          value={config.jb2}
          onChange={(e) => {
            const c = {
              ...config
            }
            c.jb2 = e.target.value
            setConfig(c)
          }}
        />
      </div>

      <div>
        <div className='flex'>
          <p>测试区或小于多少级禁言:</p>
          <Button size='small' type='primary' onClick={async () => {
            window.api.copePath(config.jb3)
            window.api.openFile(config)
          }}>点击自动复制内容并打开Envir文件</Button>
          <Button style={{ marginLeft: 10 }} size='small' type='primary' onClick={async () => {
            window.api.openMirserver('通用脚本', '禁言')
          }}>添加禁言文件</Button>
        </div>
        <Input.TextArea
          spellCheck="false"
          autoSize
          value={config.jb3}
          onChange={(e) => {
            const c = {
              ...config
            }
            c.jb3 = e.target.value
            setConfig(c)
          }}
        />
      </div>

      <div>
        <div className='flex'>
          <p>假人添加:</p>
          <Button size='small' type='primary' onClick={async () => {
            window.api.copePath(config.jb5)
            window.api.openFile(config, 'Robot_def')
          }}>点击自动复制内容并打开机器人脚本文件</Button>
          <Button style={{ marginLeft: 10 }} size='small' type='primary' onClick={async () => {
            window.api.openMirserver('通用脚本', '假人模板')
          }}>添加假人装备-走路</Button>
        </div>
        <Input.TextArea
          spellCheck="false"
          autoSize
          value={config.jb5}
          onChange={(e) => {
            const c = {
              ...config
            }
            c.jb4 = e.target.value
            setConfig(c)
          }}
        />
      </div>

      <div>
        <div className='flex'>
          <p>开启自动挂机、自动捡物(写在qm的[login]中):</p>
          <Button size='small' type='primary' onClick={async () => {
            window.api.copePath(config.jb4)
            window.api.openFile(config, 'MapQuest_def', 'QManage.txt')
          }}>点击自动复制内容并打开qm文件</Button>
        </div>
        <Input.TextArea
          spellCheck="false"
          autoSize
          value={config.jb4}
          onChange={(e) => {
            const c = {
              ...config
            }
            c.jb5 = e.target.value
            setConfig(c)
          }}
        />
      </div>

      <div>
        <div className='flex'>
          <p>一些自定义输入校验:</p>
        </div>
        <Input.TextArea
          spellCheck="false"
          autoSize
          value={config.jb6}
          onChange={(e) => {
            const c = {
              ...config
            }
            c.jb6 = e.target.value
            setConfig(c)
          }}
        />
      </div>
    </div>
  )
}

export default App
